<template>
  <div class="tab">
    <p
      :class="[workStatus === item.id ? 'on' : '', 'btn']"
      @click="onCutTab(item)"
    >
      {{ item.title }}
    </p>
  </div>
</template>

<script setup lang="ts">
import {} from "vue";
defineProps(["workStatus", "item"]);
const emit = defineEmits(["onCutTab"]);

const onCutTab = (item: any) => {
  emit("onCutTab", item);
};
</script>
<style scoped lang="scss">
.tab {
  .btn {
    height: 35px;
    line-height: 30px;
    padding: 0 5px;
    background-color: white;
    border: 1px solid #eee;
    margin: 0 10px;
  }
  .on {
    color: #50abff;
    border: 1px solid #50abff;
  }
}
</style>
